<template>
  <collapse-card title="关联专题">
    <template #header-right>
      <el-button type="primary" v-permission="['XXXX_GLZT']" @click="openModal">关联专题</el-button>
    </template>
    <div class="relate-info">
      <comm-table
        ref="table"
        :columns="columns"
        :data="currentData"
        :pageSize="pageSize"
        :pagination="false"
        :total="total"
        :currentPage="currentPage"
        @onSizeChange="onSizeChange"
        @onCurrentChange="onCurrentChange"
        :default-sort="{ prop: 'sendTime', order: 'descending' }"
      >
        <template slot-scope="{ row }">
          <el-button type="text" @click="cancelRelated(row)">取消关联</el-button>
        </template>
      </comm-table>
    </div>
  </collapse-card>
</template>
<script>
import { findSubjectByFlowId } from '@/api/common';
import CollapseCard from '@/components/layout/CollapseCard';
export default {
  name: 'RelatedSpecial',
  components: {
    CollapseCard
  },
  props: {
    id: {
      type: String
    }
  },
  data() {
    return {
      flowId: '',
      allRelated: [],
      columns: [
        { label: '序号', type: 'index', width: 70 },
        { label: '操作', type: 'operate' },
        { label: '创建时间', prop: 'createTime' },
        // { label: '专题编号', prop: 'serialNo' },
        { label: '标题', prop: 'title' },
        { label: '创建单位', prop: 'createOrgName' }
      ],
      currentPage: 1,
      pageSize: 10000,
      total: 0,
      currentData: []
    };
  },
  mounted() {
    if (this.id) {
      this.flowId = this.id;
      this.fetchData();
    }
  },
  methods: {
    handleId(id, ifOpen) {
      this.flowId = id;
      ifOpen === 'relatedSpecial' && this.openModal();
    },
    fetchData() {
      findSubjectByFlowId({
        flowId: this.flowId,
        searchable: JSON.stringify({
          page: 0,
          size: 10000,
          sort: [],
          searchCondition: {}
        })
      }).then(({ data }) => {
        this.allRelated = data.content;
        this.total = data.totalElements;
        this.onCurrentChange(this.currentPage);
      });
    },
    /**
     * 打开关联专题弹窗
     */
    openModal() {
      if (this.flowId) {
        const _this = this;
        this.$dgLayer({
          title: '关联专题',
          props: {
            id: this.id
          },
          component: require('./SpecialModal'),
          area: ['60%', '960px'],
          on: {
            onRelate(list) {
              console.log(list);
              list.forEach((item) => {
                const isExit = _this.allRelated.find((child) => child.id === item.id);
                if (!isExit) {
                  _this.allRelated.push(item);
                }
              });
              _this.total = _this.allRelated.length;
              _this.onCurrentChange(_this.currentPage);
            }
          }
        });
      } else {
        this.$confirm('关联信息需要先保存信息，是否保存信息?').then(() => {
          this.$emit('saveInfo', 0, '1','relatedSpecial');
        });
      }
    },
    /**
     * 取消关联
     */
    cancelRelated(row, _i) {
      this.$confirm('确定取消关联?').then(() => {
        let index_in_arr = _.findIndex(this.allRelated, {id: row.id});

        if(index_in_arr != -1) {
          this.allRelated.splice(index_in_arr, 1);
          this.total = this.allRelated.length;
          this.onCurrentChange(this.currentPage);
        }
      });
    },
    onSizeChange(v) {
      this.pageSize = v;
      this.currentData = this.allRelated.slice(
        (this.currentPage - 1) * this.pageSize,
        (this.currentPage - 1) * this.pageSize + this.pageSize
      );
    },
    onCurrentChange(v) {
      this.currentPage = v;
      this.currentData = this.allRelated.slice(
        (this.currentPage - 1) * this.pageSize,
        (this.currentPage - 1) * this.pageSize + this.pageSize
      );
    }
  }
};
</script>

<style scoped lang="scss">
.relate-info {
  .title-operater {
    display: flex;
    justify-content: space-between;
  }
}
</style>
